<template>
  <div class="sec-center">
    <div class="cent-header">
      <p class="loc-ico"></p>
      <el-popover placement="top-center" trigger="hover" class="city-pop">
        <CityList @tabCity="tabCity"></CityList>
        <p class="loc-txt" slot="reference">{{ area }}</p>
      </el-popover>

      <div class="loc-total">
        <p class="loc-type">干部总数（人）</p>
        <p class="loc-val">{{ splitNumber(gbToatl) }}</p>
      </div>
      <p class="org-ico"></p>
      <div class="loc-total">
        <el-popover placement="top-center" trigger="click" class="org-pop">
          <keep-alive>
            <OrgList></OrgList>
          </keep-alive>
          <p class="loc-jgs" slot="reference">机构树</p>
        </el-popover>
      </div>
    </div>
    <div class="map-content">
      <div id="animation_container">
        <canvas id="mapCan" width="2869" height="1889"></canvas>
        <div id="dom_overlay_container">
          <div
            class="map-label"
            v-for="item in mapData"
            :key="item.id"
            :id="item.id"
            :dx="item.x"
            :dy="item.y"
            :dr="item.name"
          >
            {{ item.name }} <span>{{ splitNumber(item.value) }}</span
            >人
          </div>
        </div>
      </div>
    </div>
    <!-- :orgData="orgData" -->
  </div>
</template>

<script>
import drawMap from '@/assets/map/nxMap'
import CityList from '@/components/Citylist'
import OrgList from '@/components/OrgList'
import {
  count_map_data_by_b0111,
  count_all_person_by_b0117
} from '@/api/common.js'
export default {
  name: 'provinceCenter',
  data() {
    return {
      area: '宁夏',
      gbToatl: 0,
      ctx: null,
      lib: null,
      stage: null,
      anim_container: null,
      AdobeAn: {},
      exportRoot: {},
      // orgData: [],
      // 地图数据
      mapData: [
        {
          key: '元件1',
          id: 'instance_4',
          name: '固原市',
          value: '0',
          x: 100,
          y: 120
        },
        {
          key: '元件2',
          id: 'instance_3',
          name: '中卫市',
          value: '0',
          x: 40,
          y: 50
        },
        {
          key: '元件3',
          id: 'instance_2',
          name: '吴忠市',
          value: '0',
          x: 140,
          y: 230
        },
        {
          key: '元件4',
          id: 'instance_1',
          name: '银川市',
          value: '0',
          x: 95,
          y: 115
        },
        {
          key: '元件5',
          id: 'instance',
          name: '石嘴山市',
          value: '0',
          x: 100,
          y: 30
        }
      ]
    }
  },
  components: { CityList, OrgList },
  created() {
    // 干部总人数
    count_all_person_by_b0117().then(res => {
      this.gbToatl = res.allPerson
    })
  },
  mounted() {
    drawMap(window.createjs, this.AdobeAn, this.exportRoot)
    this.initMap()
  },
  beforeDestroy() {
    this.ctx = this.lib = this.stage = this.anim_container = null
    this.AdobeAn = {}
    this.exportRoot = {}
  },
  methods: {
    initMap() {
      this.ctx = document.getElementById('mapCan')
      this.anim_container = document.getElementById('animation_container')

      var comp = this.AdobeAn.getComposition('065AF2DF17B54877B5A15E58C8905B1D')
      var loader = new window.createjs.LoadQueue(false)
      // console.log(loader)
      loader.addEventListener('fileload', evt => {
        // console.log(evt)
        this.handleFileLoad(evt, comp)
      })
      loader.addEventListener('complete', evt => {
        // console.log(evt)
        this.handleComplete(evt, comp)
      })

      this.lib = comp.getLibrary()
      loader.loadManifest(this.lib.properties.manifest)
      this.getMaPData()
    },
    fnStartAnimation() {
      this.stage.addChild(this.exportRoot)
      window.createjs.Ticker.setFPS(this.lib.properties.fps)
      window.createjs.Ticker.addEventListener('tick', this.stage)
    },
    handleFileLoad(evt, comp) {
      var images = comp.getImages()
      if (evt && evt.item.type == 'image') {
        images[evt.item.id] = evt.result
      }
    },

    handleComplete(evt, comp) {
      let lib = comp.getLibrary()
      let ss = comp.getSpriteSheet()
      let queue = evt.target
      let ssMetadata = lib.ssMetadata
      for (let i = 0; i < ssMetadata.length; i++) {
        ss[ssMetadata[i].name] = new window.createjs.SpriteSheet({
          images: [queue.getResult(ssMetadata[i].name)],
          frames: ssMetadata[i].frames
        })
      }
      this.exportRoot = new lib.地图交互()
      this.stage = new lib.Stage(this.ctx)
      this.stage.scaleX = 2.4
      this.stage.scaleY = 2.4
      this.stage.regY = 60

      this.stage.enableMouseOver()
      this.stage.addEventListener('click', p => {
        let d = p.target.children[1].htmlElement.getAttribute('dr')
        let md = {
          石嘴山市: '220800',
          银川市: '220300',
          吴忠市: '220700',
          中卫市: '220400',
          固原市: '220500'
        }
        console.log(md[d])
        this.$store.commit('setB0117', md[d])
        this.tabCity(d)
      })
      this.stage.addEventListener('mouseover', p => {
        if (p.target.children) {
          let d = p.target.children[1].htmlElement
          document.querySelectorAll('.map-label').forEach(item => {
            if (item.id != d.id) {
              item.style.opacity = 0
              item.style.top = 0
            } else {
              item.style.top = '-30px'
              item.style.opacity = 1
            }
          })
        }
      })
      this.stage.addEventListener('mouseout', p => {
        if (p.target.children) {
          document.querySelectorAll('.map-label').forEach(item => {
            item.style.opacity = 1
            item.style.top = 0
          })
        }
      })

      this.AdobeAn.compositionLoaded(lib.properties.id)
      this.fnStartAnimation()
    },
    tabCity(i) {
      this.$router.push({ name: 'city', query: { city: i } })
    },
    getMaPData() {
      count_map_data_by_b0111().then(res => {
        // console.log(res.mapData, 'count_map_data_by_b0111')
        // console.log(res, 'mapdata')
        if (res.mapData.length) {
          let dataMap = new Map()
          res.mapData.forEach(item => {
            dataMap.set(item.name, item)
          })
          this.mapData = this.mapData.map(item => {
            // console.log(item)
            return Object.assign(item, dataMap.get(item.name))
          })
        }
      })
    }
  }
}
</script>

<style lang="less">
.sec-center {
  .org-pop /deep/ .el-popover {
    left: -594px;
  }
  .city-pop .el-popover {
    left: 82px;
  }
  .map-content {
    position: relative;
    width: 100%;
    height: 1889px;
    // padding-top: 300px;
    #animation_container {
      position: relative;
      width: 100%;
      height: 100%;
    }
    #mapCan {
      position: absolute;
      display: block;
      left: 0;
      top: 0;
    }
    #dom_overlay_container {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      overflow: hidden;
      display: block;
      .map-label {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 185px;
        height: 57px;
        top: 0;
        text-align: center;
        color: white;
        background-image: url('~@/assets/images/map-label.png');
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        font-size: 18px;
        transition: 0.2s;
        span {
          font-family: Arial Black;
          margin-left: 12px;
        }
      }
    }
  }
  .loc-total {
    cursor: pointer;
  }
}
</style>
